<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      function center(e) {
        console.log("核心代码", e, this);
      }

      const box = document.querySelector(".box");
      //   如果事件执行的是回调函数 则需要返回一个函数给，否则是undefined  事件触发无效
      box.onmousemove = throttle(center, 500);

      function throttle(fn, time) {
        // 定义上一次的时间
        let lastTime = 0;
        // 返回这个回调函数
        return function (e) {
          // 获取当前时间
          let nowTime = Date.now();
          //   对比上一次和现在的时间 是否符合条件
          if (nowTime - lastTime < time) return;

          //   如果符合条件 先将此次时间赋给上一次时间  每一次比较的都是上一次时间
          lastTime = nowTime;
          // 调用函数，因为使用的是高阶函数用法，此时函数this指向为window  使用call 改变this指向
          fn.call(this, e);
        };
      }
    </script>
  </body>
</html>
